<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Three.js + 3D Tiles - 摄像头锁定模型</title>
    <style>
        html, body, canvas {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three/build/three.module.js",
        "three/addons/": "https://unpkg.com/three/examples/jsm/"
      }
    }
    </script>

    <script type="module">
        import * as THREE from "three";
        import { OrbitControls } from "three/addons/controls/OrbitControls.js";
        import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
        import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
        import { TilesRenderer } from "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.3.30/+esm";
        import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js";

        // 初始化场景
        const scene = new THREE.Scene();

        const canvas = document.querySelector("#canvas");
        const camera = new THREE.PerspectiveCamera(
            60,
            window.innerWidth / window.innerHeight,
            0.1,
            100000
        );

        const renderer = new THREE.WebGLRenderer({ canvas });
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableZoom = true;

        // 加载3D Tiles
        const tilesRenderer = new TilesRenderer("./WU-SHU_clean/tileset.json");
        tilesRenderer.setCamera(camera);
        tilesRenderer.setResolutionFromRenderer(camera, renderer);
        scene.add(tilesRenderer.group);

        // 光源
        scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));
        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
        dirLight.position.set(50, 50, 50);
        scene.add(dirLight);

        // 解码器设置
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("https://unpkg.com/three/examples/jsm/libs/draco/gltf/");
        const loader = new GLTFLoader(tilesRenderer.manager);
        loader.setDRACOLoader(dracoLoader);
        loader.setMeshoptDecoder(MeshoptDecoder);
        tilesRenderer.manager.addHandler(/\.gltf$/, loader);

        // 模型加载完成
        tilesRenderer.addEventListener("load-model", (event) => {
            const bbox = new THREE.Box3().setFromObject(tilesRenderer.group);
            const center = bbox.getCenter(new THREE.Vector3());
            const size = bbox.getSize(new THREE.Vector3());

            const maxDim = Math.max(size.x, size.y, size.z);
            const cameraDistance = maxDim * 2.0;

            camera.position.copy(center);
            camera.position.z += cameraDistance;
            camera.position.y += cameraDistance * 0.5;
            camera.lookAt(center);

            controls.target.copy(center);
            controls.update();
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            tilesRenderer.update();
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // 窗口调整
        window.addEventListener("resize", () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>
